在學會以上的知識與實作後, 已經可以做出一個有模有樣的網頁了, 但這個網頁不會動, 是靜態的, 使用者無法與網頁互動。使用者想要與網頁互動, 需要寫入 Javascript 這個魔術師讓網也可以動起來。我們在 D2 有提到 HTML 像是靜態的白色骷顱人, 給予骷顱人 CSS 的點綴後變成有色彩衣著配件裝飾的靜態骷顱人, 接著有了 Javascript 的魔法施展後, 就是底下圖片看到會動會跳的骷顱人, 彷彿有了靈魂活了起來。
網頁開發四大元素:
只需要一個 web 瀏覽器! Code that runs on the user's computer and does not need a server to run.
客戶端 JavaScript 作為瀏覽器加載 HTML 和 CSS（like from a server response) 過程的一部分在運行。JavaScript 通常通過 event handlers 來操控頁面或回應使用者的操作。
無關係…Simple Javascript statement:
console.log
console.log("message");
/* output values to the browser console, most often used to debug JS programs. You can think of this as System.out.println in Java or print in Python. */
alert function
alert("message");
/* A JS function that pops up a dialog box with a message - not ideal in practice, but sometimes a recommended debugging too
*/
alert("The browser sends greetings to you!");
// single-line comment
/**
* multi-line
* comment
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Comment</title>
</head>
<body>
<p>Paragraphs</p>
<!-- 寫在 body closing tag 之前 -->
<script>
// 單行註解 (single-line comment)
/*
多行註解
multi-line comment
*/
var x = 2;
var y = 3;
var z = x + y;
</script>
</body>
</html>
3 comment syntaxes 回顧:
<!-- comment -->
/* comment */
// single comment/* multi-line comment */
此外, 使用在 functions 和 program files 的 commets 會使用 JSDoc comment: @param 和 @returns
之後我們會在 Code Quality 專題的部分做介紹
variable 用 let keyword 來聲明
variable 命名規則: 駝峰式大小寫
大家可能還會看到使用 var 而不是 let, 不過這是一個比較舊的用法, scope 比較弱, 所以不要在任何地方使用 var
動態型別: JavaScript 不必特別宣告變數的型別, 型別會自動轉換。
let level = 30; // Number
let accuracyRate = 0.99; // Number
let name = "Pikachu"; // String
let temps = [55, 65, 60.5]; // Array
var pig = 2; // pig 目前是數字
var pig = 'Oink'; // pig 目前是字串
var pig = true; // pig 目前是布林值
// template
//Statements placed into functions can be evaluated in response to user events
function name(params) {
statement;
statement;
...
statement;
}
// example
function myFunction() {
console.log("Hello World!");
alert("Your browser sends greetings to you!");
}
以上可以是串接到我們 HTML 頁面的 basics.js 的內容
JS Function vs Java Method:
JS
function repeat(str, n) {
let result = str;
for (let i = 1; i < n; i++) {
result += str;
}
return result;
}
let repeatedStr = repeat("echo...", 3); // "echo...echo...echo..."
Java
public static String repeat(String str, int n) {
String result = str;
for (int i = 1; i < n; i++) {
result += str;
}
return result;
}
String repeatedStr = repeat("echo...", 3); // "echo...echo...echo..."
JS Function vs. Python Function
JS
function repeat(str, n) {
let result = str;
for (let i = 1; i < n; i++) {
result += str;
}
return result;
}
let repeatedStr = repeat("echo...", 3); // "echo...echo...echo..."
}
Python
def repeat(str, n):
result = str;
for i in range(1, n):
result = result + str;
return result;
repeatedStr = repeat("echo...", 3) // "echo...echo...echo..."
iThome鐵人賽
看影片追技術